<template>
    <div class="div-box">
        <div style="margin-top: 15px;margin-left: 20px;">
            <span>资产类别：</span>
            <el-select v-model="category" slot="prepend" placeholder="请选择">
                <el-option label="硬件类" value="1"></el-option>
                <el-option label="软件类" value="2"></el-option>
                <el-option label="文档类" value="3"></el-option>
            </el-select>
        </div>
        <div style="margin-top: 15px;margin-left: 20px;">
            <span>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表单：</span>
            <el-select v-model="form" slot="prepend" placeholder="请选择">
                <el-option label="网关" value="4"></el-option>
                <el-option label="服务器" value="5"></el-option>
                <el-option label="传感器" value="6"></el-option>
                <el-option label="遥控器器" value="7"></el-option>
                <el-option label="其他" value="8"></el-option>
            </el-select>
        </div>


        <p style="margin: 20px -10px; color: #333;"><span class="el-icon-upload" style="color: #169bd5;"></span> 所属信息</p>


        <div style="margin-top: 15px;margin-left: 20px;">
            <span>组织机构：</span>
            <el-select v-model="zhuZhiJiGou" slot="prepend" placeholder="请选择">
                <el-option label="" value="1"></el-option>
                <el-option label="" value="2"></el-option>
                <el-option label="" value="3"></el-option>
            </el-select>
        </div>
        <div style="margin-top: 15px;margin-left: 20px;">
            <span>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门：</span>
            <el-select v-model="buMen" slot="prepend" placeholder="请选择">
                <el-option label="" value="1"></el-option>
                <el-option label="" value="2"></el-option>
                <el-option label="" value="3"></el-option>
            </el-select>
        </div>


        <p style="margin: 20px -10px; color: #333;"><span class="el-icon-upload" style="color: #169bd5;"></span> 设备信息</p>


        <div style="margin-top: 15px;margin-left: 20px;">
            <span>设备类型：</span>
            <el-select v-model="sheBeiLeiXing" slot="prepend" placeholder="请选择">
                <el-option label="网关" value="1"></el-option>
                <el-option label="服务器" value="2"></el-option>
                <el-option label="传感器" value="3"></el-option>
                <el-option label="其他" value="4"></el-option>
            </el-select>
        </div>
        <div class="demo-input-suffix" style="display: inline-block;">
            &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编码：
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input1">
            </el-input>
        </div>
        <div class="demo-input-suffix" style="display: inline-block;">
            &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名称：
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2">
            </el-input>
        </div>
        <div class="demo-input-suffix" style="display: inline-block;">
            &nbsp; &nbsp;固件版本：
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input3">
            </el-input>
        </div>
        <div class="demo-input-suffix" style="display: inline-block;">
            &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网关版本：
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input4">
            </el-input>
        </div>
        <div class="demo-input-suffix" style="display: inline-block;">
            &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;IP地址：
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input5">
            </el-input>
        </div>

        <div>
            <span style="vertical-align: top; margin-top: 20px;display: inline-block;">&nbsp;&nbsp;&nbsp;详情说明：</span>
            <textarea type="text" placeholder="" v-model="input6" class="Input1"></textarea>
        </div>





        <span>上传照片：</span>





        <el-row>
            <el-button type="primary">保存</el-button>
            <el-button>取消</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            category: '',
            form: '',
            zhuZhiJiGou: '',
            buMen: '',
            sheBeiLeiXing: '',
            input1: '',
            input2: '',
            input3: '',
            input4: '',
            input5: '',
            input6: '',
        }
    }
}
</script>


<style scoped lang="less">
.el-select {
    width: 350px;
}

.el-input {
    width: 350px;
    margin-top: 20px;
}

.Input1 {
    width: 830px;
    height: 100px;
    margin: 20px 0px;
    outline: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.div-box {
    box-sizing: border-box;
    padding: 20px;
    color: #666666;
}
.el-row{
    margin-top: 80px;
    text-align: center;
}
</style>